<template>
  <section>
    <el-dialog v-model="visible" :before-close="onClose" :title="type == 'add' ? '新增' : '编辑'" append-to-body
      width="800px" :close-on-click-modal="false">
      <el-form ref="formRef" :inline="false" :model="dataForm" :rules="rules" label-width="120px">
        <el-form-item label="公司" prop="orgCode">
          <SelectSearch v-model="dataForm.orgCode" style="width:100%" :info="COMP_SEARCH_CONF" :value="dataForm.orgCode"
            @on-selectListData="onCompSele"></SelectSearch>
        </el-form-item>
        <el-form-item label="成本中心编码" prop="centerCode">
          <el-input v-model.trim="dataForm.centerCode" clearable maxlength="30" minlength="1"></el-input>
        </el-form-item>
        <el-form-item label="成本中心名称" prop="centerName">
          <el-input v-model.trim="dataForm.centerName" clearable maxlength="50" minlength="1"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onClose">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </section>
</template>

<script>
import api from "@/api/index";
import {ElMessage} from 'element-plus'
import {reactive, toRefs} from 'vue';
import {COMP_SEARCH_CONF} from "@/views/costCenterConfig/config";
import SelectSearch from '@/components/SelectSearch/index.vue'


export default {
  components: {
    SelectSearch
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    type: {
      default: 'add',
      type: String
    },
    dataForm: {
      type: Object,
      default: () => {
      }
    }
  },
  emits: ['on-update', 'handleClose'],

  setup(props, context) {
    const state = reactive({
      formRef: null,
      rules: {
        orgCode: [{required: true, message: '请选择公司', trigger: 'change'}],
        centerCode: [{required: true, message: '请输入成本中心编码', trigger: 'blur'}],
        centerName: [{required: true, message: '请输入成本中心名称', trigger: 'blur'}]
      },
      COMP_SEARCH_CONF
    })
    const visible = ref(false)

    const handler = {
      onCompSele(list) {
        state.compData = list
      },
      // 关闭
      onClose() {
        state.formRef.resetFields()
        state.formRef.clearValidate()
        context.emit('onClose')
      },
      // 提交
      onSubmit() {
        props.dataForm.orgName = state.compData.find(item => item.companyCode === props.dataForm.orgCode).companyName
        if (!state.formRef) return
        state.formRef.validate((valid, fields) => {
          if (valid) {
            let params = props.dataForm
            if(props.type === 'add') {
              api.costCenter.createCostCenter(params).then(res => {
                context.emit('on-update')
                handler.onClose()
                ElMessage.success('操作成功')
              })
            } else {
              api.costCenter.editCostCenter(params).then(res => {
                context.emit('on-update')
                handler.onClose()
                ElMessage.success('操作成功')
              })
            }
          } else {
            console.log('error submit!')
            return false
          }
        })
      }
    }
    watch(() => props.dialogVisible, (val) => {
      if (val) visible.value = val
    })
    return {
      ...toRefs(state),
      visible,
      ...handler
    }
  }
}
</script>

<style scoped>

</style>
